<div class="max-w-3xl mx-auto">
    <h2 class="text-xl font-semibold mb-6 text-center">执行安装</h2>

    <!-- 命令行风格的输出窗口 -->
    <div class="bg-gray-900 rounded-lg p-4 h-80 overflow-auto font-mono text-sm" id="consoleWrapper">
        <div id="console" class="text-gray-200 space-y-1">
            <div class="text-green-400">准备开始安装...</div>
        </div>
    </div>

    <!-- 进度条 -->
    <div class="mt-6">
        <div class="flex justify-between mb-1">
            <span class="text-sm font-medium text-blue-500" id="progressText">准备中...</span>
            <span class="text-sm font-medium text-blue-500" id="progressPercentage">0%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2.5">
            <div class="bg-blue-500 h-2.5 rounded-full transition-all duration-300" id="progressBar" style="width: 0%"></div>
        </div>
    </div>

    <div class="mt-8 text-center space-x-4">
        <a href="index.php?action=db-config" class="bg-gray-500 text-white px-6 py-2 rounded-md hover:bg-gray-600 transition-colors inline-block">
            上一步
        </a>
        <button id="startBtn" class="bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 transition-colors hidden">
            重试安装
        </button>
        <button id="nextBtn" onclick="goNext()" disabled class="bg-green-500 text-white px-6 py-2 rounded-md hover:bg-green-600 transition-colors opacity-50 cursor-not-allowed">
            下一步
        </button>
    </div>
</div>

<script>
function appendConsole(text, type = 'default') {
    const consoleWrapper = document.getElementById('consoleWrapper');
    const console = document.getElementById('console');
    const line = document.createElement('div');
    
    switch(type) {
        case 'success':
            line.className = 'text-green-400';
            break;
        case 'error':
            line.className = 'text-red-400';
            break;
        case 'warning':
            line.className = 'text-yellow-400';
            break;
        case 'detail':
            line.className = 'text-gray-400 ml-4';
            break;
        case 'step':
            line.className = 'text-blue-400 font-bold';
            break;
        default:
            line.className = 'text-gray-200';
    }
    
    line.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
    console.appendChild(line);

    // 滚动到底部
    consoleWrapper.scrollTop = consoleWrapper.scrollHeight;
}

function updateProgress(text, progress) {
    const percent = Math.min(100, Math.max(0, progress));
    document.getElementById('progressBar').style.width = `${percent}%`;
    document.getElementById('progressPercentage').textContent = `${percent}%`;
    if (text) {
        document.getElementById('progressText').textContent = text;
    }
}

function startInstallation() {
    const startBtn = document.getElementById('startBtn');
    startBtn.style.display = 'none';
    
    const eventSource = new EventSource('index.php?action=execute-step&config=' + 
        encodeURIComponent(JSON.stringify(JSON.parse(localStorage.getItem('dbConfig')))));

    eventSource.onmessage = function(event) {
        const data = JSON.parse(event.data);
        
        switch(data.type) {
            case 'step':
                appendConsole(data.content.trim(), 'step');
                updateProgress(data.content, data.progress);
                break;
            case 'output':
                appendConsole(data.content.trim());
                break;
            case 'detail':
                appendConsole(data.content.trim(), 'detail');
                break;
            case 'success':
                appendConsole(data.content.trim(), 'success');
                break;
            case 'error':
                appendConsole(data.content.trim(), 'error');
                startBtn.style.display = 'inline-block';
                startBtn.textContent = '重试安装';
                break;
            case 'complete':
                appendConsole(data.content, 'success');
                updateProgress('安装完成', 100);
                document.getElementById('nextBtn').disabled = false;
                document.getElementById('nextBtn').classList.remove('opacity-50', 'cursor-not-allowed');
                eventSource.close();
                // 自动跳转到完成页面
                setTimeout(() => {
                    goNext();
                }, 1500);
                break;
            case 'close':
                eventSource.close();
                break;
        }
    };

    eventSource.onerror = function(event) {
        appendConsole('安装过程出现错误，请查看上方日志', 'error');
        startBtn.style.display = 'inline-block';
        startBtn.textContent = '重试安装';
        eventSource.close();
    };
}

function goNext() {
    window.location.href = 'index.php?action=complete';
}

// 页面加载完成后自动开始安装
document.addEventListener('DOMContentLoaded', function() {
    startInstallation();
});
</script> 